<template>
  <view class="body">
    <view class="top">
      <view>
        <swiper
          class="swiper"
          :indicator-dots="true"
          :circular="true"
          indicator-active-color="#eb4450"
          :autoplay="true"
          :interval="3000"
          :duration="500"
        >
          <swiper-item v-for="(item, index) in swiperList" :key="item.pics_id">
            <image
              height="100%"
              mode="aspectFit"
              :src="item.pics_mid_url"
              @click="previewImage(index)"
            ></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="goods_info">
        <view class="good_price">
          <view class="price_title">￥{{ goods_price }}</view>
          <view
            ><u-icon color="#707070" size="40" name="share"></u-icon>
            <u-icon color="#707070" size="40" name="star"></u-icon>
          </view>
        </view>
        <view class="good_title u-line-2">{{ goods_name }}
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="main">
        <view class="detail_title">-图文详情-</view>
        <view class="good-content">
      <u-parse :html="goods_introduce"></u-parse>
    </view>
    </view>

    <!-- 底部 -->
    <view class="submit_Bar">
      <view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">客服</view>
			</view>
			
			<navigator :url="`/pages/cart/cart?goods_id=${goods_id}`" open-type="switchTab" class="item car">
				<u-badge class="car-num" :count="cartCount || 0" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">购物车</view>
			</navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handleCartAdd">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
  </view>
</template>

<script>
import {mapMutations,mapGetters} from "vuex"
export default {
  data() {
    return {
      swiperList: [],
      goods_id: "",
      goods_price: "",
      goods_name: "",
      goods_introduce: ``,
      goodsInfo:null
    };
  },
 
  onLoad(option) {
    const { goods_id } = option;
    this.goods_id = goods_id;
    this.getGoodDetail();
  },
  computed:{
    ...mapGetters('cart',['cartCount'])
  },
  methods: {
    ...mapMutations("cart",['cartAdd']),
    async getGoodDetail() {
      const res = await this.$u.http.get("/goods/detail", {
        goods_id: this.goods_id,
      });
      this.goodsInfo = res
      const { pics, goods_price, goods_name, goods_introduce } = res;
      this.swiperList = pics;
      this.goods_price = goods_price;
      this.goods_name = goods_name;
      this.goods_introduce = goods_introduce;
    },
    // 预览大图
    previewImage(index) {
      const urls = this.swiperList.map((item) => item.pics_big_url);
      uni.previewImage({
        current: index,
        urls: urls,
        loop: true,
      });
    },
    handleCartAdd(){
     this.cartAdd(this.goodsInfo)
     wx.showToast({
       title: '添加成功',
       icon: 'none',
     });
       
    }
  },
};
</script>

<style lang="scss">
.body{
    background: #ddd;
}
.top{
    background-color: #fff;
    border-radius: 0 5rpx 5rpx 0;
    margin-bottom: 10rpx;
    .swiper {
      height: 500rpx;
      text-align: center;
    }
    .goods_info {
      padding: 36rpx;
      .good_price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        u-icon {
          margin-left: 20rpx;
        }
        .price_title {
          font-size: 36rpx;
          color: $theme-color;
        }
        .good_title {
          font-size: 30rpx;
          color: #434343;
        }
      }
    }
}
.main{
background-color: #fff;
padding-bottom:120rpx ;
.detail_title{
    text-align: center;
    font-size: 28rpx;
    line-height: 1.5;
    color: #434343 ;
}
    .good-content {
      margin-top: 10rpx;
    }
}
.submit_Bar{
    position: fixed;
    width: 100%;
    background-color: #fff;
    bottom: 0;
}
.navigation {
	display: flex;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 10rpx;
	.left {
		flex: 1;
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		flex: 1;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>